<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #test_div{
            width: 200px;
            height: 100px;
            /* border: 1px solid #333; */
            position: relative;
            overflow: hidden;
        }
        #all{
            width: 600px;
            height: 100px;
            display: flex;
            position: absolute;
            left: 0;
            justify-content: space-between;
        }
        #all>div:nth-child(1) {
            width: 200px;
            height: 100%;
            background-color: aqua;
        }
        #all>div:nth-child(2) {
            width: 200px;
            height: 100%;
            background-color: rgb(38, 207, 52);
        }
        #all>div:nth-child(3) {
            width: 200px;
            height: 100%;
            background-color: rgb(72, 25, 148);
        }
        .p1 {
            position: absolute;
            top: 10%;
            left: 10px;
            color: #333;
            font-size: 20px;
            display: none;
            cursor: pointer;
        }
        .p2 {
            position: absolute;
            top: 10%;
            left: 180px;
            color: #333;
            font-size: 20px;
            cursor: pointer;
            display: none;
        }
        ul {
            width: 25%;
            position: absolute;
            top: 65px;
            left: 56px;
            height: 30px;
            display: flex;
        }
        li {
            width: 33%;
            cursor: pointer;
        }
    </style>
    <script>
        var foc = document.getElementsByClassName('cla');
        var arrow_l = document.getElementsByClassName('p1');
        var arrow_r = document.getElementsByClassName('p2');
        console.log(arrow_l)
        let timer = setTimeout(() => {
            // 鼠标移入移出显示隐藏左右切换键
            foc[0].addEventListener('mouseenter', function() {
                arrow_l[0].style.display = 'block';
                arrow_r[0].style.display = 'block';
            });
            foc[0].addEventListener('mouseleave', function() {
                arrow_l[0].style.display = 'none';
                arrow_r[0].style.display = 'none';
                
            });
            clearTimeout(timer);
            // 3） 动态生成小圆圈 有几张图片，就生成几个小圆圈
            var divll = document.getElementsByClassName('cla')[0].querySelector('div');
            var ull = foc[0].querySelector('ul');
            var focusWidth = foc[0].offsetWidth; // 轮播图盒子的宽度
            // ul下li的个数取决于 all 下div 的个数
            for (var i = 0; i < divll.children.length; i++) {
                // 创建小li
                var li = document.createElement('li');
                //记录当前小圆圈的索引号 通过自定义属性来做
                li.setAttribute('index',i);
                // 把li插入ul里面
                ull.appendChild(li);
                // 4）小圆圈的排他思想
                li.addEventListener('click', function() {
                    console.log('sssss')
                    // 5）点击小圆圈，移动图片 移动的是ul
                    // 点击当前小圆圈，获取索引
                    var index = this.getAttribute('index');
                    // 点击了某个小li 要把这个li的索引号给num
                    num = index;
                    // 点击了某个小li 要把这个li的索引号给circle
                    circle = index;
                    // ul移动距离的算法： 小圆圈的索引号 乘以 图片的宽度
                    animate(divll, -index*focusWidth);
                });
            }
            ull.children[0].className = 'current';
            // 6）克隆第一张图片（li）放到ul最后面
            var first = divll.children[0].cloneNode(true);
            // 克隆是在生成小圈圈的下面，所以小圆圈不会随图片的个数增加而增加
            divll.appendChild(first);
            // 7) 点击右侧按钮，图片滚动一张
            // 控制图片的播放
            var num = 0;
            // 控制小圆圈的播放
            var circle = 0;
            // flag 节流阀
            var flag = true;
            // 左右按钮点击滚动
            // 9）右侧按钮做法
            arrow_r[0].addEventListener('click', function() {
                if (flag) {
                    flag = false;
                    // 如果走到了最后复制的那张图片，此时 ul要快速复原 left 改为 0
                    if (num == divll.children.length - 1) {
                        divll.style.left = 0;
                        num = 0;
                    }
                    num++; // 变量自加1
                    // 图片移动的距离：num * 图片的宽度
                    animate(divll, -num * focusWidth, function() {
                        // 前一个图片播放完毕，打开节流阀，才能播放下一张图片
                        flag = true;
                    });
                    circle++;
                    // 由于克隆了一个张图片，而小圆圈比图片少了一个，所以要给circle做一下判断，让小圆圈复原
                    if (circle == ull.children.length) {
                        circle = 0;
                    }
                    circleChange()
                }
            });
            // 10）左侧按钮做法
            arrow_l[0].addEventListener('click', function() {
                if (flag) {
                    flag = false;
                    // 如果走到了最后复制的那张图片，此时 ul要快速复原 left 改为 0
                    if (num == 0) {
                        num = divll.children.length - 1;
                        divll.style.left = -num * focusWidth + 'px';
                    }
                    num--; 
                    // 图片移动的距离：num * 图片的宽度
                    animate(divll, -num * focusWidth, function() {
                        flag = true;
                    });
                    circle++;
                    
                    if (circle < 0) {
                        circle = ull.children.length - 1;
                    }
                    circleChange()
                }
            });
            // 小圆圈change
            function circleChange() {
                // 8）先清除其余小圆圈的current类名
                for (var i = 0; i < ull.children.length; i++) {
                    ull.children[i].className = '';
                }
                // 留下当前的小圆圈的current类名
                ull.children[circle].className = 'current';
            }
            console.log(arrow_r)
            // 自动播放轮播图
            var timer = setInterval(function() {
                // 手动调用点击事件
                // arrow_r[0].onclick()
                if (flag) {
                    flag = false;
                    // 如果走到了最后复制的那张图片，此时 ul要快速复原 left 改为 0
                    if (num == divll.children.length - 1) {
                        divll.style.left = 0;
                        num = 0;
                    }
                    num++; // 变量自加1
                    // 图片移动的距离：num * 图片的宽度
                    animate(divll, -num * focusWidth, function() {
                        // 前一个图片播放完毕，打开节流阀，才能播放下一张图片
                        flag = true;
                    });
                    circle++;
                    // 由于克隆了一个张图片，而小圆圈比图片少了一个，所以要给circle做一下判断，让小圆圈复原
                    if (circle == ull.children.length) {
                        circle = 0;
                    }
                    circleChange()
                }
            }, 2000);
            // 动画函数的封装 动画必须要定位 obj 目标对象 target 目标位置
            function animate(obj, target, callback) {
                // 如果不断点击，导致动画速度变快，因为开启太多的定时器，解决方案：让元素只有一个定时器执行
                // 先清除以前的定时器，只保留当前的一个定时器执行
                clearInterval(obj.timer);
                // 给不同的元素指定了不同的定时器
                /* 不用给timer开辟新的内存空间，而是使用的是obj的一个属行，这样做节省资源，提高性能*/
                obj.timer = setInterval(function() {
                    // 步长值写在定时器里面 步长公式：(目标值 - 现在的位置) / 10
                    var step = (target - obj.offsetLeft) / 10;
                    // 小数要取整 才能保证盒子移动到整数目标位置
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if (obj.offsetLeft == target) {
                        // 停止动画，本质是停止定时器
                        clearInterval(obj.timer);
                        // 回调函数一定写在定时器结束里面
                        callback&&callback();
                    }
                    // 盒子移动距离
                    // 把每次加1 这个步长值改为一个慢慢变小的值 
                    obj.style.left = obj.offsetLeft + step + 'px';
            
                }, 30);
            }
        });
        
        
    </script>
</head>

<body>
    <!-- 轮播图 -->
    <div id="test_div" class="cla">
        <div id="all">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <p class="p1">&lt;</p>
        <p class="p2">&gt;</p>
        <ul type="circle">

        </ul>
    </div>
    
</body>
</html>